<template>
  <div class="page-view overflow-y pos-rel flex-col-c">
    <!--    <van-image-->
    <!--      round-->
    <!--      width="8rem"-->
    <!--      height="8rem"-->
    <!--      class="my-30"-->
    <!--      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"-->
    <!--    />-->
    <div class="w-100 mt-20">
      <van-cell icon="manager-o" title="用户名称" :value="userInfo.nickName" />
      <van-cell icon="phone-o" title="手机号码" :value="userInfo.phonenumber" />
      <van-cell icon="envelop-o" title="用户邮箱" :value="userInfo.email" />
      <van-cell v-if="userInfo.dept" icon="cluster-o" title="所属部门" :value="userInfo.dept.deptName" />
      <van-cell icon="contact-o" title="所属角色" :value="handleRoles()" />
      <van-cell icon="tosend" title="创建日期" :value="userInfo.createTime" />
    </div>

    <div class="w-100 px-15 flex-row-e-c box-sizing-bb mt-20">
      <span class="text-color-light mr-20" @click="openPicker('info')">
        <van-icon name="orders-o" />
        修改信息
      </span>
      <span class="text-color-light" @click="openPicker('pwd')">
        <van-icon name="edit" />
        修改密码
      </span>
    </div>

    <div class="w-100 flex-row-c mt-40">
      <!-- <van-button loading type="success" loading-text="加载中..." /> -->
      <van-button class="w-80" round :loading="submitLoading" block type="primary" @click="handleLoginOut">
        退出登录
      </van-button>
    </div>
    <EditInfo v-model="editPicker" ref="edit" @onConfirm="editPicker = false"></EditInfo>
    <UpdatePwd v-model="pwdPicker" ref="pwd" @onConfirm="pwdPicker = false"></UpdatePwd>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import EditInfo from './EditInfo.vue';
import UpdatePwd from './UpdatePwd.vue';
import useStore from '@/store/index';

import { storeToRefs } from 'pinia';
import { showConfirmDialog } from 'vant';
const { user } = useStore();
const { userInfo } = storeToRefs(user);

/**
 * 数据部分
 */
const submitLoading = ref(false);
const editPicker = ref(false);
const pwdPicker = ref(false);

function handleRoles() {
  if (!userInfo.value?.roles?.length) {
    return '';
  }
  return userInfo.value.roles.map((o, i) => {
    return i <= 0 ? o.roleName : `${o.roleName}/`;
  });
}

function onConfirm() {
  editPicker.value = false;
}

function openPicker(type) {
  if (type === 'info') {
    editPicker.value = true;
  } else {
    pwdPicker.value = true;
  }
}

function handleLoginOut() {
  showConfirmDialog({
    title: '提 示',
    message: '是否退出？'
  }).then(async () => {
    await user.logOut();
  });
}
</script>
<style scoped lang="scss">
:deep(.van-cell__left-icon) {
  line-height: 1.7;
  margin-right: 5px;
}
</style>
